import { Directive, ElementRef, Input, SimpleChange } from "@angular/core";
import { ECharts, init } from "echarts";
import { fromEvent, Subject } from "rxjs";
import { debounceTime, takeUntil } from "rxjs/operators";

@Directive({
  selector: "[appLineEchart]",
})
export class LineEchartDirective {
  @Input() echartData: any;
  destroy$ = new Subject();
  chart: ECharts = init(this.el.nativeElement);

  constructor(public el: ElementRef) {}

  initChart() {
    this.chart = init(this.el.nativeElement);
    fromEvent(window, "resize")
      .pipe(takeUntil(this.destroy$), debounceTime(2000))
      .subscribe(() => {
        this.chart.resize();
      });
    // if (this.appEchartsDoubleYLine.name === '专项整治分类') {
    //     this.chart.on('click', (param) => {
    //         // 这里可以进行点击事件的处理
    //         console.log(param);
    //     });
    // }
  }

  // 解除resize
  relieve() {
    this.destroy$.next();
    this.destroy$.complete();
    if (this.chart) {
      this.chart.dispose();
    }
  }

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    const options = changes["echartData"];
    if (
      options &&
      options.previousValue !== options.currentValue &&
      options.currentValue
    ) {
      this.relieve();
      this.initChart();
      this.renderChart();
    }
  }

  ngOnDestroy() {
    this.relieve();
  }

  resize(height: any, width: any) {
    if (this.chart) {
      this.chart.resize({ width: width, height: height });
    }
  }

  renderChart() {
    const option:any = {
      legend: {
        data: ["跨境通信网络通联", "跨境通信访问分析"], // 图例名称，与 series 的 name 对应
        left: "0%",
      },
      grid: {
        left: "5%",
        right: "1%",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
        },
      },
      xAxis: {
        type: "category",
        // 替换为实际的日期数据，与目标图的 x 轴日期对应
        data: [
          "2025-07-21",
          "2025-07-22",
          "2025-07-23",
          "2025-07-24",
          "2025-07-25",
          "2025-07-26",
          "2025-07-27",
          "2025-07-28",
        ],
      },
      yAxis: {
        type: "value",
        name: "上报数据条数",
        nameLocation: "middle", // 让名称在 y 轴中间位置
        nameGap: 80, // 调整名称和 y 轴轴线的距离，数值可按需改
        axisLabel: {
          formatter: "{value} 条",
        },
      },
      series: [
        {
          name: "", // 系列名称，对应图例
          data: [2000, 600, 900, 4000, 1200, 100, 200, 3200], // 模拟贴近目标图的蓝色线条数据，需根据实际精准调整
          type: "line",
          smooth: true,
          // 可自定义线条颜色，比如目标图里蓝色线条
          lineStyle: {
            color: "#5793f3",
          },
        },
        {
          name: "", // 系列名称，对应图例
          data: [300, 400, 500, 800, 1200, 100, 1100, 100], // 模拟贴近目标图的绿色线条数据，需根据实际精准调整
          type: "line",
          smooth: true,
          // 自定义线条颜色，比如目标图里绿色线条
          lineStyle: {
            color: "#58bc58",
          },
        },
      ],
    };
    if (this.echartData) {
      option.legend.data = this.echartData.legend;
      option.xAxis.data = this.echartData.date;
      option.series[0].data = this.echartData.seriesFirst;
      option.series[0].name = this.echartData.legend[0];
      option.series[1].data = this.echartData.seriesSecond;
      option.series[1].name = this.echartData.legend[1];
    }

    this.chart.clear();
    this.chart.setOption(option, false);
  }
}
